<template>
  <div class="q-pa-md bg-grey-9 text-white">
    <t-list
      dark
      padding
      bordered
      class="rounded-borders"
      style="max-width: 328px"
    >
      <t-expansion-item icon="perm_identity" label="Account settings">
        <t-card class="bg-grey-9">
          <t-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
            dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </t-card-section>
        </t-card>
      </t-expansion-item>

      <t-expansion-item icon="signal_wifi_off" label="Wifi settings">
        <t-card class="bg-grey-9">
          <t-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
            dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </t-card-section>
        </t-card>
      </t-expansion-item>

      <t-expansion-item icon="drafts" label="Drafts" header-class="text-orange">
        <t-card class="bg-grey-9">
          <t-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
            dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </t-card-section>
        </t-card>
      </t-expansion-item>
    </t-list>
  </div>
</template>
